<template>
	<view>
		<view class="head">
			<!--说明-->
			<view class="explaininfo">
				<view class="explain">
					<view class="explain-item">
						<view class="info">1</view>
						<view class="textbox">
							<text>选定奖品</text>
							<text>发布抽奖</text>
						</view>
					</view>
					<view class="line"></view>
					<view class="explain-item">
						<view class="info">2</view>
						<view class="textbox">
							<text>中奖用户</text>
							<text>填写地址</text>
						</view>
					</view>
					<view class="line"></view>
					<view class="explain-item">
						<view class="info">3</view>
						<view class="textbox">
							<text>抽奖平台</text>
							<text>包邮发货</text>
						</view>
					</view>
				</view>
				<navigator url="/pages/article/index?key=dhkdhkLL" class="zhinan">操作指南</navigator>
			</view>
			<!--选项卡切换-->
			<me-tabs v-model="tabIndex" :tabs="tabs" @change="tabChange" :height="100" :tabWidth="180"></me-tabs>
		</view>

		<mescroll-uni ref="mescrollRef" @init="mescrollInit" top="280" :down="downOption" :up="upOption" @up="upCallback"
		 @emptyclick="emptyClick">
			<view class="shopbox">
				<view  class="shopitem" v-for="(item,index) in listdata" :key="index">
					<image :src="item.loaded?item.cover:'/static/image/defaultimg.png'" mode="scaleToFill" @click="gotodetail(item.id)" lazy-load="true"  @load="onImageLoad('listdata',index)"></image>
					<view class="shopprize">
						<text class="prizetitles">{{item.title}}</text>
						<view class="money">
							<text>¥{{item.price}}</text>
							<view @click="addprizeimg(index)" class="iconfont" style="color: #378aff;font-size: 40rpx;">&#xe659;</view>
						</view>
					</view>
				</view>
			</view>
		</mescroll-uni>
	</view>
</template>

<script>
	/**
	 * 奖品商城首页
	 */

	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	
	export default {
		mixins: [MescrollMixin],
		data() {
			// 使用mixin (在main.js注册全局组件)
			return {
				tabIndex: 0, // 当前菜单下标
				tabs: ['菜单载入..'],
				category: [],
				downOption: {
					use: false,
				},
				upOption: {
					// page: {
					// 	size: 10 // 每页数据的数量
					// },
					noMoreSize: 5, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
					empty: {
						tip: '~ 搜索无数据 ~', // 提示
						btnText: ''
					},
					textLoading:"玩命加载中 ...",
					textNoMore:"-- 人家是有底线的 --",
				},
				listdata: [],
				prizeimg:'',//编辑奖品图片数组
				prizeIndex:0,//奖品图片索引
			}
		},
		onLoad(option) {
			let lottey = uni.getStorageSync('lettytables');
			// console.log(lottey.prizeimgarr);
			// console.log(option);
			// console.log( uni.getStorageSync('lettytables'));
			//查看是选择商城的产品
			if(option.prizeindex){
				this.prizeimg = lottey.prizeimgarr;
				this.prizeIndex = option.prizeindex;
			}
			this.gettabbar();
		},
		methods: {
			//懒加载，加载完之后显示图片
			onImageLoad(key, index) {
				this.$set(this[key][index], 'loaded', 'loaded'); 
			},
			// 添加奖品商城图片
			addprizeimg(index){
				console.log(this.prizeIndex);
				let lottey = uni.getStorageSync('lettytables');
				let prizeinfos = this.listdata[index];
				//nsole.log(this.prizeIndex,this.prizeimg,prizeinfos);
				this.prizeimg[this.prizeIndex-1].goods_id = prizeinfos.id;//奖品商城id
				this.prizeimg[this.prizeIndex-1].thumb = prizeinfos.cover;//奖品商城缩略图
				this.prizeimg[this.prizeIndex-1].goods_price = prizeinfos.price;//奖品商城价格
				this.prizeimg[this.prizeIndex-1].title = prizeinfos.title;//奖品商城标题
				
				//存入内存
				lottey.prizeimgarr = this.prizeimg;
				uni.setStorageSync('lettytables',lottey);
				lottey='';
				this.$ShowMsg('奖品选择成功！');
				setTimeout(()=>{
					uni.navigateBack({
						delta:1
					})
				},1500)
			},
			//去详情页面
			gotodetail(id){
				uni.navigateTo({
					url:'/pages/prizemall/prizemalldetail?id='+id+'&prizeindex='+this.prizeIndex,
				})
			},
			gettabbar() {
				this.$HttRequest({
					url: '/product/category',
					param: ''
				}).then((res) => {
					if (res.status === 10000) {
						this.category = res.data;
						//转换列表
						let menu = [];
						res.data.map((item, index) => {
							menu = menu.concat(item.title);
						})
						this.tabs = menu;
						console.log(this.category);
					} else {
						this.$ShowMsg(res.message)
					}
				}).catch((error) => {
					//异常错误
					this.$ShowMsg('statusCode：' + error.errMsg);
				});
			},

			//获取列表数据
			getinitdata(pages, categoryid = 0) {
				return new Promise((resolve, reject) => {
					this.$HttRequest({
						url: '/product/lists',
						param: {
							page: pages,
							category: categoryid
						}
					}).then((res) => {
						if (res.status === 10000) {
							resolve(res.data.data);
						} else {
							this.$ShowMsg(res.message);
						}
					}).catch((error) => {
						//异常错误
						reject(error.errMsg);
					});
				});

			},

			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback(page) {
				console.log('upCallback');
				//出现分类不能直接复制
				if (this.category.length > 0) {
					let category = this.category[this.tabIndex];
					this.getinitdata(page.num, category.id).then(res => {
						console.log(res);
						this.mescroll.endSuccess(res.length);
						//设置列表数据
						if (page.num == 1) this.listdata = []; //如果是第一页需手动制空列表
						this.listdata = this.listdata.concat(res); //追加新数据
					}).catch(error => {
						//联网失败, 结束加载
						this.mescroll.endErr();
						this.$ShowMsg(error);
					})
				} else {
					this.ansyupcallback(page);
				}
			},

			//异步获取不到参数
			ansyupcallback(pages) {
				let getbartimer = setInterval(() => {
					if (this.category.length > 0) {
						clearInterval(getbartimer);
						let category = this.category[this.tabIndex];
						console.log(category);
						this.getinitdata(pages.num, category.id).then(res => {
							console.log(res);
							this.mescroll.endSuccess(res.length);
							//设置列表数据
							if (pages.num == 1) this.listdata = []; //如果是第一页需手动制空列表
							this.listdata = this.listdata.concat(res); //追加新数据
						}).catch(error => {
							//联网失败, 结束加载
							this.mescroll.endErr();
							this.$ShowMsg(error);
						})
					}
				}, 100)
			},

			//点击空布局按钮的回调
			emptyClick() {
				//	console.log(321);
				uni.showToast({
					title: '点击了按钮,具体逻辑自行实现'
				})
			},

			// 切换菜单
			tabChange(e) {
				console.log('tabChange');
				this.tabIndex = e;
				this.listdata = [] // 先置空列表,显示加载进度
				this.mescroll.resetUpScroll() // 再刷新列表数据
			}
		}
	}
</script>

<style lang="scss">
	.shopbox {
		flex-wrap: wrap;
		display: flex;
		justify-content: flex-start;
		flex: 1;
		padding: 10rpx;

		.shopitem {
			margin: 10rpx;
			width: 345rpx;
			font-size: 28rpx;
			display: flex;
			justify-content: flex-start;
			flex-direction: column;
			border-radius: 20rpx;
			box-shadow: 0 0 15rpx #e6e6e6;

			image {
				width: 345rpx;
				height: 324rpx;
				border-top-left-radius: 20rpx;
				border-top-right-radius: 20rpx;
			}

			.shopprize {
				width: 90%;
				margin: 0 auto;
				display: flex;
				justify-content: center;
				flex-direction: column;
				.prizetitles{
					height: 80rpx;
			
				}
				.money {
					margin: 10rpx 0;
					margin-top: 15rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					color: $uni-color-primary;
					font-size: 30rpx;
					font-weight: bold;
				}
			}


		}
	}

	.head {
		position: fixed;
		width: 100%;
		z-index: 9990;

		top: --window-top;
		/* css变量 */
		left: 0;
		height: 250rpx;
		display: flex;
		justify-content: center;
		flex-direction: column;

		.explaininfo {
			flex: 1;
			padding: 0 20rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			background-color: $uni-color-primary;

			.zhinan {
				font-weight: bold;
				padding: 10rpx;
				font-size: 25rpx;
				color: #fff;
				border: 2rpx solid #fff;
				border-radius: 15rpx;
			}

			.explain {
				color: #ffe6a2;
				font-size: 25rpx;
				display: flex;
				justify-content: flex-start;
				align-items: center;

				.line {
					width: 2rpx;
					height: 80rpx;
					background-color: rgba(#d2e4fe, 0.3);
					margin: 0rpx 20rpx;
				}

				.explain-item {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.info {
						margin-right: 10rpx;
						border-radius: 50%;
						width: 35rpx;
						height: 35rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						font-size: 22rpx;
						background-color: rgba(#c8defd, 0.5);
						color: #fff;
					}

					.textbox {
						display: flex;
						flex-direction: column;
						justify-content: center;
					}
				}
			}

		}


	}
</style>
